<template>
  <el-drawer :title="id?'修改':'添加'" :before-close="cancel" :visible.sync="value" direction="rtl">
    <div class="demo-drawer__content">
      <el-form :model="drawerForm" :rules="rules" ref="drawerForm" label-width="100px">
        <el-form-item label="oss类型" prop="type">
          <el-select clearable v-model="drawerForm.type" placeholder="请选择oss类型" size="small">
            <el-option
              v-for="(item,index) in ossTypes"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="唯一编码" prop="code">
          <el-input v-model="drawerForm.code" size="small" placeholder="请输入文件配置编码"></el-input>
        </el-form-item>
        <el-form-item label="上传地址" prop="ossUrl">
          <el-input v-model="drawerForm.ossUrl" size="small" placeholder="请输入上传地址"></el-input>
        </el-form-item>
        <el-form-item label="oss标识" prop="ossAccessKeyId">
          <el-input v-model="drawerForm.ossAccessKeyId" size="small" placeholder="请输入oss存储id【本地随便】"></el-input>
        </el-form-item>
        <el-form-item label="oss密匙" prop="ossAccessKeySecret">
          <el-input
            v-model="drawerForm.ossAccessKeySecret"
            size="small"
            placeholder="请输入oss密匙【本地随便】"
          ></el-input>
        </el-form-item>
        <el-form-item label="存储桶" prop="bucket">
          <el-input v-model="drawerForm.bucket" size="small" placeholder="请输入文件的存储桶"></el-input>
        </el-form-item>
        <el-form-item label="额外配置" prop="additionalParams">
          <el-input v-model="drawerForm.additionalParams" size="small" placeholder="额外的配置"></el-input>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="cancel" size="small">取 消</el-button>
        <el-button
          type="primary"
          @click="submit"
          size="small"
          :loading="loading"
        >{{ loading ? '提交中 ...' : '确 定' }}</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { save, update } from "@/api/file";
export default {
  name: "roleAddAndUpddate",
  components: {},
  props: {
    value: Boolean,
    ossTypes: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      id: null,
      loading: false,
      drawerForm: {
        type: "",
        code: "",
        ossUrl: "",
        ossAccessKeyId: "",
        ossAccessKeySecret: "",
        bucket: "",
        additionalParams: null
      },
      rules: {
        ossAccessKeyId: [
          { required: true, message: "oss标识不能为空", trigger: "blur" }
        ],
        ossAccessKeySecret: [
          { required: true, message: "oss密匙不能为空", trigger: "blur" }
        ],
        ossUrl: [
          { required: true, message: "上传地址不能为空", trigger: "blur" },
          {
            trigger: "blur",
            validator: (rule, value, callback) => {
              const regx = /^(http|https)\:\/\/((?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)|(?:(?:[a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*(?:[a-zA-Z]{2,}))(:\d{1,5})?$/;
              if (!regx.test(value)) {
                callback(new Error("上传地址不符合要求【http[s]://ip:port】"));
              } else {
                callback();
              }
            }
          }
        ],
        bucket: [
          { required: true, message: "存储桶不能为空", trigger: "blur" }
        ],
        code: [
          { required: true, message: "上传编码不能为空", trigger: "blur" },
          {
            trigger: "blur",
            validator: (rule, value, callback) => {
              const regx = /\w+/;
              if (!regx.test(value)) {
                callback(
                  new Error("角色编码不符合规格【小写字母|数字|下划线组成】")
                );
              } else {
                callback();
              }
            }
          }
        ],
        type: [
          {
            trigger: "blur",
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("oss类型不能空"));
              } else {
                callback();
              }
            }
          }
        ]
      }
    };
  },
  methods: {
    init(row) {
      this.id = row.id;
      if (this.id) {
        this.drawerForm.id = row.id;
        const obj = { ...row };
        this.drawerForm = obj;
        this.drawerForm.ossAccessKeySecret = "";
      }
    },
    submit() {
      this.$refs["drawerForm"].validate(async isOk => {
        if (isOk) {
          if (this.id) {
            this.drawerForm.id = this.id;
            await update(this.drawerForm);
          } else {
            await save(this.drawerForm);
          }
          // 重新刷新数据
          this.$emit("refresh");
        }
      });
    },
    cancel() {
      this.id = null;
      this.$refs["drawerForm"].resetFields();
      this.drawerForm = {
        type: "",
        code: "",
        ossUrl: "",
        ossAccessKeyId: "",
        ossAccessKeySecret: "",
        bucket: "",
        additionalParams: null
      };
      this.$emit("input", false);
    }
  }
};
</script>

<style lang="scss" scoped>
.demo-drawer__footer {
  text-align: center;
}
</style>